<template>
  <div class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- 品牌和切换标题 -->
        <div class="navbar-header">
          <router-link class="logo" to="/">
            <img alt="Brand" src="./images/nav-logo.png" />
          </router-link>
        </div>

        <!-- 导航链接、表单和其他 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="clearfix">
              <router-link active-class="active" to="/">
                <span class="menu-text">首页</span>
                <i class="iconfont icon-navigation menu-icon"></i>
              </router-link>
            </li>
            <li>
              <router-link to="/erweima">
                <span class="menu-text">下载App</span>
                <i class="iconfont icon-download menu-icon"></i>
              </router-link>
            </li>
            <li>
              <router-link active-class="active" to="/ITtechnique/backend">
                <span class="menu-text">IT技术</span>
                <i class="iconfont icon-a-back_icon_52x menu-icon"></i>
              </router-link>
            </li>
            <li>
              <form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="搜索" />
                </div>
                <button class="btn btn-default" @click="toSearch">搜索</button>
              </form>
            </li>
          </ul>
          <!-- 登录与其他 -->
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#">
                <i class="iconfont icon-zimu menu-icon"></i>
              </a>
            </li>
            <li v-if="!userInfo.name">
              <router-link to="/login">
                <span class="menu-text">登录</span>
              </router-link>
            </li>
            <li v-if="!userInfo.name">
              <router-link to="register">
                <span class="menu-text register">注册</span>
              </router-link>
            </li>
            <li v-else>
              <div
                class="picture dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <img src="@/assets/mm.jpg" />
              </div>
              <ul class="dropdown-menu">
                <li>
                  <a href="#"
                    ><i class="iconfont icon-a-back_icon_52x"></i>我的主页</a
                  >
                </li>
                <li><a>收藏的文件夹</a></li>
                <li><a>喜欢的文章</a></li>
                <li><a>已购的内容</a></li>
                <li><a>我的钱包</a></li>
                <li><a>设置</a></li>
                <li><a>帮助与反馈</a></li>
                <li><a @click="outLogin">退出</a></li>
              </ul>
            </li>
            <li>
              <router-link to="/Acrticle/Acrticle">
                <i class="iconfont icon-comments menu-icon content">写文章</i>
              </router-link>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      keyword: "",
      userInfo: {
        name: "",
      },
    };
  },
  mounted() {
    this.gettoken();
  },
  methods: {
    // 去搜索
    toSearch() {
      this.$router.push("/search");
    },
    // 获取token
    gettoken() {
      const result = localStorage.getItem("TOKEN");
      if (result) {
        this.userInfo.name = 123;
        this.$set(this.userInfo, this.userInfo.name, 123);
      }
    },
    // 退出登录
    outLogin() {
      this.$store.dispatch("userLogOut");
      setTimeout(() => {
        location.reload();
      }, 200);
    },
  },
  watch: {
    userInfo: {
      deep: true,
      handler() {},
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  .navbar {
    border-radius: 0px;
    &.navbar-default {
      background-color: transparent;
      border-color: transparent;
      border-bottom: 1px solid #eee;
    }
    .container-fluid {
      // margin: 0 12%;
      font-size: 17px;
      width: 100%;
      position: fixed;
      z-index: 99999;
      background-color: #fff;
    }
    .navbar-header {
      height: 50px;
      .logo {
        img {
          height: 100%;
        }
      }
    }
    .collapse {
      display: flex;
      .nav {
        margin-left: 9%;
        li {
          a {
            display: block;
            height: 56px;
            line-height: 26px;
            padding: 15px;
            color: #333;
            &.active {
              color: #ea6f5a;
            }
            .menu-text {
              float: right;
            }
            .menu-icon {
              display: inherit;
              float: left;
              font-size: 20px;
              margin-right: 5px;
            }
          }
          .navbar-form {
            .form-group {
              .form-control {
                border-radius: 28px;
                background-color: #eeeeee;
                border: none;
              }
            }
            .btn {
              border-radius: 28px;
              border: 1px solid #ea6f5a;
              color: #ea6f5a;
              &:focus {
                outline: none;
                border: 1px solid #ea6f5a;
              }
              &:hover {
                background-color: #fad7d0;
              }
            }
          }
        }
      }
      .navbar-right {
        // width: 332px;
        li {
          .picture {
            width: 35px;
            height: 35px;
            margin-top: 18px;
            cursor: pointer;
            img {
              width: 100%;
            }
          }
          // .picture .show{
          //   display: none;
          // }
          // .picture:hover .show{
          //   display: block;
          // }
          a {
            color: #a4a4a4;
            .register {
              width: 64px;
              height: 28px;
              line-height: 28px;
              color: #ea6f5a;
              border: 1px solid #ea6f5a;
              border-radius: 38px;
              text-align: center;
            }

            .content {
              display: block;
              border: 1px solid #ea6f5a;
              border-radius: 38px;
              color: #fff;
              background-color: #ea6f5a;
              font-size: 16px;
              padding: 0 10px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
}
.dropdown-menu {
  a {
    cursor: pointer;
  }
}
</style>
